<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String ctx = request.getContextPath();
%>

<html>
	<head>
		<title>DataTable Main Page</title>
		
		<style type="text/css" title="currentStyle">
			@import "<%=ctx %>/resources/datatable/css/demo_page.css";
			@import "<%=ctx %>/resources/datatable/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="<%=ctx %>/resources/datatable/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="<%=ctx %>/resources/datatable/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				var oTable = $('#example').dataTable( {
					"bProcessing": true,
					"bFilter": false,
					"sAjaxSource": "<%=ctx%>/resources/datatable/ajax/arrays.txt"
				} );

				alert($("#qryForm").serialize());
			});
		</script>
	</head>

	<body>
		<div>
			<form action="<%=ctx %>/jquery/dataTable.do" method="post" id="qryForm">
				<div><input type="text" name="a" value="1" id="a" /></div>
				<div><input type="text" name="b" value="2" id="b" /></div>
				<div><input type="hidden" name="c" value="3" id="c" /></div>
				<div>
					<textarea name="d" rows="8" cols="40">4</textarea>
				</div>
				<div>
					<select name="e">
					<option value="5" selected="selected">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					</select>
				</div>
				<div>
					<input type="checkbox" name="f" checked="checked" value="8" id="f" />
					<input type="checkbox" name="f" checked="checked" value="9" id="f" />
					<input type="checkbox" name="f" value="10" id="f" />
				</div>
				<div>
					<input type="submit" name="g" value="Submit" id="g" />
				</div>
			</form>
		</div>
	
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
			<thead>
				<tr>
					<th width="20%">Rendering engine</th>
					<th width="25%">Browser</th>
					<th width="25%">Platform(s)</th>
					<th width="15%">Engine version</th>
					<th width="15%">CSS grade</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
			<tfoot>
				<tr>
					<th>Rendering engine</th>
					<th>Browser</th>
					<th>Platform(s)</th>
					<th>Engine version</th>
					<th>CSS grade</th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
